<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'费用支出',liner:false}"></header-top>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">申请人</view>
			<view class="flexright">
				<input type="text" style="text-align: right;" disabled="" v-model="dataAll.staff.username">
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">审批人</view>
			<view class="flexright">
				<input type="text" style="text-align: right;" placeholder="选择审批人" disabled="" v-model="dataAll.applystaff.username">
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">审核状态</view>
			<view class="flexright">
				<view class="shlables radius" v-show="dataAll.status==10">待审核</view>
				<view class="shlable radius" v-show="dataAll.status==20">审核通过</view>
				<view class="hlable radius" v-show="dataAll.status==30">已作废</view>
				<view class="hlable radius" v-show="dataAll.status==40">已拒绝</view>
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">费用类型</view>
			<view class="flexright">
				<input type="text" style="text-align: right;" placeholder="选择费用类型" disabled="" v-model="dataAll.fyhttype.name">
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">金额</view>
			<input type="text" style="text-align: right;" placeholder="输入金额" disabled v-model="dataAll.price">
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">费用时间</view>
			<view class="flexright" >
				<input type="text" style="text-align: right;" disabled="" placeholder="选择费用时间" v-model="dataAll.fy_time">
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext">票据单号</view>
			<input type="text" style="text-align: right;" placeholder="输入单号" disabled  v-model="dataAll.pjdh">
		</view>
		<view class="ffffff mainpadding_top">
			<view class="titletext">提现凭证</view>
			<view class="flexleft margin_top">
				<!-- 已上传的图片 -->
				<view class="select-box flexcolumn" v-for="(item,index) in dataAll.images_text" :key="index">
					<view class="upimageicon">
						<image :src="item" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="ffffff mainpadding_top">
			<view class="titletext">费用支出备注</view>
			<textarea class="textarea mainpadding radius margin_top" placeholder="请输入费用支出备注" disabled v-model="dataAll.notes"></textarea>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				dataAll:{},
				pageShow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		// 打印机结束
		methods: {
			init(){
				httpRequest.request('/dhtapi/user/fyhtDetail', 'POST', {
					id:this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
					
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}
	
	.shlables {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: rgba(243, 173, 61, .1);
	}
	.hlable{
			padding: 6rpx 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ff0000;
			line-height: 28rpx;
			background-color: rgba(255, 0, 0,.1);
		
	}
	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.selectbox {
		padding: 12rpx 50rpx;
		border-radius: 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f5f5f5;
	}

	.needpadding {
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.05);
	}

	.smalltext {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.price {
		color: #00B855;
	}

	.priceinput {
		text-align: right;
	}

	.pricetext {
		font-size: 28rpx;
		color: #0BBDCB;
		font-weight: bold;
	}
	.maincolor_text{
		font-size: 24rpx;
		color: #0BBDCB;
	}

	.over {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #00B855;
		border-radius: 50rpx;
		padding: 15rpx 70rpx;
	}

	// 底部tab
	.tab_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 50rpx 30rpx;
	}

	.tab1 {
		border: 2rpx solid #0BBDCB;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		padding: 12rpx 50rpx;
	}

	.tab2 {
		border: 2rpx solid #0BBDCB;
		border-left: none;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		padding: 12rpx 50rpx;
	}

	// 选中的底部
	.selecbottab {
		background-color: #0BBDCB;
		color: #FFFFFF;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	// 未选中的底部
	.noselecbottab {
		background-color: #fff;
		color: #0BBDCB;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	.zhengds {
		padding: 40rpx;
	}
	
	.shangpin {
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.05);
	}
	
	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	
	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}
	
	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}
	// 定位点点点(蓝色提示)
	.diandiandian {
		position: relative;
	}
	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}
	
	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}
	
	.leftimage {
		width: 34rpx;
		height: 34rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.itemselect {
		padding: 20rpx 30rpx;
	}
	
	//结束
	// 图片选择开始
	.select-box {
		width: 25%;
	}
	.upimageicon {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}
	
	.shanchu {
		width: 31rpx !important;
		height: 30rpx !important;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}
	
	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
	
	// 图片选择结束
</style>
